<template>
    <!-- 在组件中，使用v-for 到时候，一定要加上 :key -->
    <!-- 虽然自己封装了一个轮播图的组件，但是我们轮播图组件内部并没有真正的要渲染的数据 -->
    <!-- 数据的来源，谁使用此轮播图组件，谁为轮播图传递数据 -->
    <!-- 这样就涉及到了父组件向子组件传递数据了 【使用属性绑定来传递数据】 -->
        <mt-swipe :auto="4000">
            <mt-swipe-item v-for="item in lunbotu" :key="item.id">
                <img :src="item.url"  :class="{full:isfull}">
            </mt-swipe-item>
        </mt-swipe>
</template>

<script>
        export default{
            porps:["lunbotu","isfull"]
        }
</script>

<style lang="scss" scoped>
     .mint-swipe{
        height:200px;
        .mint-swipe-item{
            text-align:center;
            // &:nth-child(1){
            //     background-color:red;
            // }
            // &:nth-child(2){
            //     background-color:blue;
            // }
            // &:nth-child(3){
            //     background-color:cyan;
            // }
            img{
                // width:100%;
                height:100%;
            }
        }
    }
    //定义一个图片宽度为100%的类
    .full{
        width:100%;
    }
</style>
